<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>头部</title>
</head>
<body>
	<header class="header-v4">
		<!-- Header desktop -->
		<div class="container-menu-desktop">
			<!-- Topbar -->
			<div class="top-bar">
				<jsp:include page="topBar.jsp"></jsp:include>
			</div>
			<div class="wrap-menu-desktop how-shadow1"> 
				<nav class="limiter-menu-desktop container">
	
					<!-- Logo desktop -->
					<a href="#" class="logo">
						<img src="images/icons/logo-01.png" alt="IMG-LOGO">
					</a>
	
					<!-- Menu desktop -->
					<div class="menu-desktop">
						<ul class="main-menu">
							<li class="active-menu">
								<a href="index.jsp">主页</a>
							</li>
	
							<li>
								<a href="http://localhost:8080/FiveClothes/allPro">店铺</a>
							</li>
	
							<li class="label1" data-label1="hot">
								<a href="shoping-cart.jsp">购物车</a>
							</li>
	
							<li>
								<a href="blog.html">博客</a>
							</li>
	
							<li>
								<a href="about.jsp">关于</a>
							</li>
	
							<li>
								<a href="contact.jsp">联系我们</a>
							</li>
						</ul>
					</div>
	
					<!-- Icon header -->
					<div class="wrap-icon-header flex-w flex-r-m">
						<div class="icon-header-item cl2 hov-cl1 trans-04 p-l-22 p-r-11 icon-header-noti js-show-cart"
							data-notify="2">
							<a href="shoping-cart.jsp" style="color:black;content:none;"><i class="zmdi zmdi-shopping-cart"></i></a>
							
						</div>
					</div>
				</nav>
			</div>
		</div>
	
		<!-- Header Mobile -->
		<div class="wrap-header-mobile">
			<!-- Logo moblie -->
			<div class="logo-mobile">
				<a href="index.html"><img src="images/icons/logo-01.png" alt="IMG-LOGO"></a>
			</div>
	
			<!-- Icon header -->
			<div class="wrap-icon-header flex-w flex-r-m m-r-15">
				<div class="icon-header-item cl2 hov-cl1 trans-04 p-r-11 js-show-modal-search">
					<i class="zmdi zmdi-search"></i>
				</div>
	
				<div class="icon-header-item cl2 hov-cl1 trans-04 p-r-11 p-l-10 icon-header-noti js-show-cart"
					data-notify="2">
					<i class="zmdi zmdi-shopping-cart"></i>
				</div>
	
				<a href="#" class="dis-block icon-header-item cl2 hov-cl1 trans-04 p-r-11 p-l-10 icon-header-noti"
					data-notify="0">
					<i class="zmdi zmdi-favorite-outline"></i>
				</a>
			</div>
	
			<!-- Button show menu -->
			<div class="btn-show-menu-mobile hamburger hamburger--squeeze">
				<span class="hamburger-box">
					<span class="hamburger-inner"></span>
				</span>
			</div>
		</div>
	
		
		<!-- Modal1 -->
		<div class="modal fade" id="myModal" tabindex="-1" role="dialog">
			<div class="modal-dialog">
				<!-- Modal content-->
				<div class="modal-content">
					
					<div class="modal-body modal-body-sub_agile">
						<div class="col-md-8 modal_body_left modal_body_left1">
							<h3 class="agileinfo_sign"> 登录 <span>Now</span></h3>
							<form id="login" class="layui-form" method="post" onsubmit="return false;">
								<div class="styled-input agile-styled-input-top">
									<input type="text" id="name" name="user" required="">
									<label>用户名</label>
									<span></span>
								</div>
								<div class="styled-input">
									<input type="password" id="pwd" name="password" required="">
									<label>密码</label>
									<span></span>
								</div>
								<!-- <input type="submit" lay-filter="isLogin" value="点击登录" > -->
								<button class="layui-btn" lay-submit lay-filter="isLogin">登录</button>
							</form>
						 <ul class="social-nav model-3d-0 footer-social w3_agile_social top_agile_third">
								<li><a href="#" class="facebook">
										<div class="front"><i class="fa fa-facebook" aria-hidden="true"></i></div>
										<div class="back"><i class="fa fa-facebook" aria-hidden="true"></i></div>
									</a></li>
								<li><a href="#" class="twitter">
										<div class="front"><i class="fa fa-twitter" aria-hidden="true"></i></div>
										<div class="back"><i class="fa fa-twitter" aria-hidden="true"></i></div>
									</a></li>
								<li><a href="#" class="instagram">
										<div class="front"><i class="fa fa-instagram" aria-hidden="true"></i></div>
										<div class="back"><i class="fa fa-instagram" aria-hidden="true"></i></div>
									</a></li>
								<li><a href="#" class="pinterest">
										<div class="front"><i class="fa fa-linkedin" aria-hidden="true"></i></div>
										<div class="back"><i class="fa fa-linkedin" aria-hidden="true"></i></div>
									</a></li>
							</ul>
							<div class="clearfix"></div>
							<p><a href="#" data-toggle="modal" data-target="#myModal2"> 没有帐户？</a></p>
		
						</div>
						<div class="col-md-4 modal_body_right modal_body_right1">
							<!-- <img src="images/log_pic.jpg" alt=" " /> -->
						</div>
						<div class="clearfix"></div>
					</div>
				</div>
				<!-- //Modal content-->
			</div>
		</div>
		<!-- //Modal1 -->
		<!-- Modal2 -->
		<div class="modal fade" id="myModal2" tabindex="-1" role="dialog">
			<div class="modal-dialog">
				<!-- Modal content-->
				<div class="modal-content">
					
					<div class="modal-body modal-body-sub_agile">
						<div class="col-md-8 modal_body_left modal_body_left1">
							<h3 class="agileinfo_sign">注册 <span>Now</span></h3>
							<form id="register" class="layui-form" method="post" onsubmit="return false;">
								<div class="styled-input agile-styled-input-top">
									<input type="text" name="m_user" required="">
									<label>用户名</lal>
									<span></span>
								</div>
								<div class="styled-input">
									<input type="password" name="m_password" required="">
									<label>密码</label>
									<span></span>
								</div>
								<div class="styled-input">
									<input type="text" name="m_phone" id="phone1" required="" lay-verify="phone">
									<label>手机号</label>
									<span></span>
									<input type="submit" value="点击获取验证码" id="phoneYzm" style="width:100px;height:30px;padding:0px;font-size:12px;" />
								</div>
								<div class="styled-input">
									<input type="text" name="m_yzm">
									<label>验证码</label>
									<span></span>
								</div>
								<div class="styled-input">
									<input type="email" name="m_emil" required="">
									<label>电子邮箱</label>
									<span></span>
								</div>
								
								<!-- <input type="submit" lay-filter="isZhuce" value="注册" /> -->
								<button class="layui-btn" lay-submit lay-filter="isZhuce">注册</button>
							</form>
							<ul class="social-nav model-3d-0 footer-social w3_agile_social top_agile_third">
								<li><a href="#" class="facebook">
										<div class="front"><i class="fa fa-facebook" aria-hidden="true"></i></div>
										<div class="back"><i class="fa fa-facebook" aria-hidden="true"></i></div>
									</a></li>
								<li><a href="#" class="twitter">
										<div class="front"><i class="fa fa-twitter" aria-hidden="true"></i></div>
										<div class="back"><i class="fa fa-twitter" aria-hidden="true"></i></div>
									</a></li>
								<li><a href="#" class="instagram">
										<div class="front"><i class="fa fa-instagram" aria-hidden="true"></i></div>
										<div class="back"><i class="fa fa-instagram" aria-hidden="true"></i></div>
									</a></li>
								<li><a href="#" class="pinterest">
										<div class="front"><i class="fa fa-linkedin" aria-hidden="true"></i></div>
										<div class="back"><i class="fa fa-linkedin" aria-hidden="true"></i></div>
									</a></li>
							</ul>
		
						</div>
						<div class="col-md-4 modal_body_right modal_body_right1">
							<!-- <img src="images/log_pic.jpg" alt=" " /> -->
						</div>
						<div class="clearfix"></div>
					</div>
				</div>
				<!-- //Modal content-->
			</div>
		</div>
		<!-- //Modal2 -->
		
	
	</header>
</body>
<script type="text/javascript">
		layui.use([ 'form', 'layer' ], function() {
			var form = layui.form();
		  	var layer = layui.layer;
		 	var $ = layui.jquery;
			
		 	//登入
			form.on('submit(isLogin)', function(data) {
				$.post('http://localhost:8080/FiveClothes/member/loginmember', $("#login")
						.serialize(), function(res) {
					if (res.data) {
						location.href = 'index.jsp';
						layer.msg("登录成功");
					}else{
						layer.msg("信息错误，登录失败");
					}
				}, "json");
			})
			
			//注册
			form.on('submit(isZhuce)', function(data) {
				$.post('http://localhost:8080/FiveClothes/member/addmember', $("#register")
						.serialize(), function(res) {
					console.log($("#register").serialize());
					if (res.success) {
						layer.msg(res.message,{
				  			  time: 2000 //2秒关闭（如果不配置，默认是3秒）
			  			}, function(){
							 window.location.reload();//刷新父页面
			  			});
					}else {
						layer.msg(res.message);
					}
				}, "json");
			})
			$("#phoneYzm").click(function(){
				var phone = $("#phone1").val();
					$.post('http://localhost:8080/FiveClothes/member/sendSms',$("#register")
							.serialize(),
								function(res){
							if(res.code=="OK"){
								layer.msg("发送成功!");
							}else{
								layer.msg("发送失败!");
							}
						},"json")
			});
		})
	</script>
</html>
